<template>
    <div>
        <div class="order-pay">
            <div class="order-list">
                <div class="order-item flex" v-for="item in cartList" :key="item.id">
                    <div class="left">
                        <img :src="item.goodsCoverImg" alt="">
                    </div>
                    <div class="middle">
                        <div>{{ item.goodsName }}</div>
                        <div>{{ item.goodsIntro }}</div>
                        <div>{{ item.specName }}</div>
                    </div>
                    <div class="right">
                        <div>￥{{ item.sellingPrice + '' }}</div>
                        <div>x{{ item.goodsCount }}</div>
                    </div>
                </div>
            </div>
            <div class="total flex-b">
                <div>配送</div>
                <div class="limit">16:00前下单，平台将在24小时内发货</div>
            </div>
            <!-- <div class="total flex-b">
                <div>无接触配送
                </div>
                <div>可指定收货地址
                    <Right size="12" />
                </div>
            </div> -->
            <!-- <div class="total flex-b">
                <div>开具发票</div>
                <div>
                    本次不开具发票
                    <Right size="12" />
                </div>
            </div> -->
            <nut-popup position="bottom" :style="{ width: '100%', height: '50%' }" v-model:visible="couponShow"
                closeable round @closed="closed" class="popup-coupon">
                <div class="title">红包优惠</div>
                <div class="list">
                    <div class="item flex-b" v-for="(item, index) in couponList" :key="item">
                        <div class="flex-a">
                            <div class="left">
                                <div>￥{{ item.discount }}</div>
                                <div>{{ item.name }}</div>
                            </div>
                            <div class="middle">
                                <div>{{ item.couponDesc }}</div>
                                <div>{{ item.endTime }}</div>
                            </div>
                        </div>
                        <div class="right">
                            <nut-checkbox v-model="item.checkbox"
                                @change="checked => changeBox(checked, index)"></nut-checkbox>
                        </div>
                    </div>
                </div>
            </nut-popup>
            <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
        </div>
        <div class="detail">
            <div class="total flex-b">
                <div>价格明细</div>
                <div></div>
            </div>
            <div class="total flex-b">
                <div>商品总价</div>
                <div>￥{{ totalPrice }}</div>
            </div>
            <div class="total flex-b" @click="select">
                <div>使用优惠券</div>
                <div>-￥{{ discount }}
                    <Right size="12" />
                </div>
            </div>
            <div class="total flex-b">
                <div>运费</div>
                <div>包邮</div>
            </div>
        </div>
        <div class="detail">
            <div class="total flex-b flex-a">
                <div>邀请码</div>
                <div><nut-input v-model="joinCode" @blur="onInput" placeholder="请输入邀请码" :readonly="read" /></div>
            </div>
        </div>
        <div class="detail">
            <div class="total flex-b">
                <div class="flex-a"><img src="https://cxj.szzkba.cn/upload/i/2024/09/12/101734.png"
                        alt=""><text>微信支付</text>
                </div>
                <div>
                    <nut-radio-group v-model="payType">
                        <nut-radio label="wx"></nut-radio>
                    </nut-radio-group>
                </div>
            </div>
            <div class="total flex-b">
                <div class="flex-a"><img src="https://cxj.szzkba.cn/upload/i/2024/09/12/101735.png"
                        alt=""><text>余额支付</text>
                </div>
                <div>
                    <nut-radio-group v-model="payType">
                        <nut-radio label="ye"></nut-radio>
                    </nut-radio-group>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Right, Tips } from '@nutui/icons-vue-taro';
import mitt from "./../../../../utils/mitt";
import { reactive, toRefs, onMounted, watch } from 'vue';
import { getCart, getOrderInfo, getCouponPay, getUserMax } from '../../../../api/index'
export default {
    components: {
        Right,
        Tips
    },
    setup() {
        const data = reactive({
            cartList: [
            ],
            totalPrice: 0 as any,
            payType: 'wx',
            orderId: '',
            redPacket: '',
            couponShow: false,
            choose: false,
            couponList: [],
            discount: 0,
            couponId: 0,
            msg: '订单金额满49免邮',
            type: 'text',
            show: false,
            cover: false,
            remark: '',
            joinCode: '',
            read: false,
        });
        watch(
            () => data.payType,
            (newValue) => {
                mitt.emit("payType", newValue)
            },
        )
        onMounted(() => {
            const router = useRouter();
            if (router.params.orderId) {
                data.orderId = router.params.orderId
                getOrderDetail(router.params.orderId)
                getCouponList(router.params.orderId)
            }
            Taro.getStorage({
                key: 'userId',
                success: function (res) {
                    console.log(res.data)
                    getUserMax(res.data).then(res => {
                        if (res.resultCode == 200) {
                            data.joinCode = res.message
                            data.read = true
                        }
                    })
                }
            })
        });
        const getOrderDetail = (id) => {
            getOrderInfo(id).then(res => {
                if (res.resultCode == 200) {
                    data.cartList = res.data.newBeeMallOrderItemVOS
                    data.remark = res.data.remark
                    addPrice()
                }
            })
        }
        const getCouponList = (id) => {
            getCouponPay(id).then(res => {
                if (res.resultCode == 200) {
                    let list = res.data
                    list.forEach(item => {
                        item.checkbox = false
                    })
                    data.couponList = list
                    data.redPacket = list.length + '张可用'
                }
            })
        }
        const addPrice = () => {
            let total = 0
            data.cartList.forEach(item => {
                total += parseFloat(item.sellingPrice) * parseInt(item.goodsCount)
            })
            data.totalPrice = total.toFixed(2)
            // mitt.emit("pay", (total.toFixed(2) - data.discount) >= 49 ? total.toFixed(2) - data.discount : total.toFixed(2) - data.discount + 6)
            mitt.emit("pay", total.toFixed(2) - data.discount)
            mitt.emit("couponId", data.couponId)
        }
        const onInput = (e) => {
            mitt.emit("code", e.detail.value)
        }
        const select = () => {
            data.couponShow = true
        }
        const changeBox = (checked, index) => {
            //console.log(index, checked);
            let list = data.couponList
            if (checked == true) {
                list.forEach((item, n) => {
                    index != n ? item.checkbox = false : ''
                })
            }
            checked ? data.discount = list[index].discount : data.discount = 0
            checked ? data.couponId = list[index].couponId : data.couponId = 0

            addPrice()
        };
        const closed = () => {
            let list = data.couponList
            let n = list.findIndex(item => {
                return item.checkbox == true
            })
            if (n == -1) {
                data.redPacket = '0张可用'
                data.choose = false
            } else {
                data.redPacket = '-￥' + list[n].discount
                data.discount = list[n].discount
                data.couponId = list[n].couponId
                data.choose = true
            }
            addPrice()
        }
        const onBlur = (e) => {
            mitt.emit("remark", e.detail.value)
        }
        return {
            ...toRefs(data), addPrice, getOrderDetail, select, changeBox, closed, getCouponList, onBlur, onInput
        }
    }
};
</script>


<style lang="scss">
.order-pay {
    padding: 30rpx 30rpx 20rpx;
    background: #fff;
    border-radius: 20rpx;
    margin: 20rpx 32rpx 20rpx;

    .order-list {

        .order-item {
            margin-bottom: 10rpx;

            .left {

                img {
                    width: 200rpx;
                    height: 200rpx;
                }

                margin-right: 20rpx;
            }

            .middle {
                width: 60%;

                div:first-child {
                    font-size: 30rpx;
                    margin-bottom: 20rpx;
                }

                div:last-child {
                    color: #6B7283;
                    font-size: 24rpx;
                }
            }

            .right {
                text-align: right;

                div:first-child {
                    font-size: 34rpx;
                    font-weight: bold;
                    margin-bottom: 20rpx;
                }

                div:last-child {
                    color: #6B7283;
                }
            }
        }
    }

    .total {
        padding: 10rpx 0;

        div:first-child {
            font-size: 26rpx;

            img {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }

            .nut-icon-tips {
                color: #999;
                position: relative;
                top: 8rpx;
            }
        }

        div:last-child {
            color: #989994;
            font-size: 26rpx;
        }

        div:last-child.limit {
            color: #FFA245;
        }

        .has {
            color: #FB452E;
        }
    }

    .popup-coupon {

        .title {
            text-align: center;
            margin: 20rpx auto 30rpx;
        }

        .list {
            .item {
                margin: 0 auto 10rpx;
                background: #fff;
                box-shadow: 0 0 20rpx 20rpx #F9F9F9;
                border-radius: 20rpx;
                width: 94%;
                padding: 20rpx 0 20rpx 30rpx;
                box-sizing: border-box;

                .left {
                    margin-right: 60rpx;
                    white-space: nowrap;

                    div:first-child {
                        color: #FB452E;
                        font-size: 36rpx;
                    }

                    div:last-child {
                        color: #9C9C9C;
                        font-size: 24rpx;
                    }
                }

                .middle {
                    white-space: nowrap;

                    div:first-child {
                        color: #333;
                        font-weight: bold;
                        font-size: 30rpx;
                    }

                    div:last-child {
                        color: #FB452E;
                        font-size: 24rpx;
                    }
                }

                .right {
                    width: 30%;
                    border-left: 1rpx dashed #EAEAEA;
                    position: relative;

                    text {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
        }
    }
}

.detail {
    padding: 30rpx 30rpx 20rpx;
    background: #fff;
    border-radius: 20rpx;
    margin: 20rpx 32rpx 20rpx;

    .nut-input {
        padding: 0 50rpx 20rpx;
    }

    .input-text {
        text-align: right !important;
    }

    .total {
        padding: 10rpx 0;

        div:first-child {
            font-size: 26rpx;

            img {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }

            .nut-icon-tips {
                color: #999;
                position: relative;
                top: 8rpx;
            }
        }

        div:last-child {
            color: #989994;
            font-size: 26rpx;
        }

    }
}
</style>